<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="header-h">
					<image class="header-bg" mode="widthFix" :src="data.header_bg"></image>
					<view style="position:relative">
						<view style="margin-bottom: 28upx;font-size: 9pt">账户可用余额(元)</view>
						<view style="font-size: 19pt;font-weight:bold;margin-bottom: 28upx;">{{data.account_money}}</view>
						<view>
							<view @click="showCash" class="cash-btn">提现</view>
						</view>
					</view>
				</view>
				<view class="menu-group">
					<navigator class="menu-item flex flex-row" url="/store/m/account-rest/account-rest" v-if="false">
						<view class="flex-grow-1 flex flex-row">
							<view class="flex-grow-1 flex-y-center">待结算金额</view>
							<view class="flex-grow-0 flex-y-center">￥{{data.rest_money}}</view>
						</view>
						<view class="flex-grow-0 flex-y-center">
							<image class="pointer" src="../../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
					<navigator class="menu-item flex flex-row" url="/store/m/account-log/account-log">
						<view class="flex-grow-1 flex flex-row flex-y-center">收支记录</view>
						<view class="flex-grow-0 flex-y-center">
							<image class="pointer" src="../../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
					<navigator class="menu-item flex flex-row" url="/store/m/cash-log/cash-log">
						<view class="flex-grow-1 flex flex-row flex-y-center">提现记录</view>
						<view class="flex-grow-0 flex-y-center">
							<image class="pointer" src="../../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
					<navigator class="menu-item flex flex-row weijiesuan" url="/store/m/settle_detail/settle_detail?settle_type=0">
						<view class="flex-grow-1 flex flex-row flex-y-center">未结算金额</view>
						<view class="flex-grow-0 flex-y-center">
							<text>￥{{data.no_settle_price}}</text>
							<image class="pointer" src="../../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
					<navigator class="menu-item flex flex-row" url="/store/m/settle_detail/settle_detail?settle_type=1">
						<view class="flex-grow-1 flex flex-row flex-y-center">已结算金额</view>
						<view class="flex-grow-0 flex-y-center">
							<text>￥{{data.settle_price}}</text>
							<image class="pointer" src="../../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
				</view>
				<view class="footer">
					<view @click="showDesc" style="font-size: 9pt;padding: 12upx;display: inline-block;color: #397ed3">交易手续费说明</view>
				</view>
				<view class="cash-modal flex-y-center flex-x-center" v-if="data.show_cash">
					<view class="modal-bg"></view>
					<view class="modal-dialog">
						<view style="padding: 36upx;text-align: center">
							<view style="margin-bottom: 36upx">请输入提现金额(元)</view>
							<input bindblur="cashInput" class="cash-input" placeholder="'1~'+account_money" :value="data.cash_val"></input>
						</view>
						<view class="modal-dialog-footer flex flex-row">
							<view @click="hideCash" class="flex-grow-1">取消</view>
							<view @click="cashSubmit" class="flex-grow-1" style="color: #ff4544">提交</view>
						</view>
					</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					cash_val: ""
				}
			};
		},
		onLoad: function (t) {myVue = this;
			var a = this,
				e = "store_account_data",
				o = a.getApp.core.getStorageSync(e);
			a.getApp.page.onLoad(this, t);

			o && a.setData(o), a.getApp.core.showNavigationBarLoading(), a.getApp.request({
				url: a.getApp.api.store.user.account,
				success: function (t) {
					a.getApp.core.hideNavigationBarLoading(), 0 == t.code ? (a.setData(t.data), getApp().core.setStorageSync(e, t.data)) :
						a.getApp.core.showModal({
							title: "提示",
							content: t.msg,
							success: function () {}
						});
				},
				complete: function () {
					a.getApp.core.hideNavigationBarLoading();
				}
			});
		},
		onReady: function () {
			myVue.getApp.page.onReady(this);
		},
		onShow: function () {
			myVue.getApp.page.onShow(this);
		},
		onHide: function () {
			myVue.getApp.page.onHide(this);
		},
		onUnload: function () {
			myVue.getApp.page.onUnload(this);
		},
		methods: {
			showDesc: function () {
				myVue.getApp.core.showModal({
					title: "交易手续费说明",
					content: this.data.desc,
					showCancel: !1
				});
			},
			showCash: function () {
				myVue.getApp.core.navigateTo({
					url: "/store/m/cash/cash"
				});
			},
			hideCash: function () {
				this.setData({
					show_cash: !1
				});
			},
			cashInput: function (t) {
				var a = t.detail.value;
				a = parseFloat(a), isNaN(a) && (a = 0), a = a.toFixed(2), this.setData({
					cash_val: a || ""
				});
			},
			cashSubmit: function (t) {
				var a = this;
				a.data.cash_val ? a.data.cash_val <= 0 ? a.showToast({
					title: "请输入提现金额。"
				}) : (a.getApp.core.showLoading({
					title: "正在提交",
					mask: !0
				}), a.getApp.request({
					url: a.getApp.api.store.user.cash,
					method: "POST",
					data: {
						cash_val: a.data.cash_val
					},
					success: function (t) {
						a.getApp.core.showModal({
							title: "提示",
							content: t.msg,
							showCancel: !1,
							success: function () {
								0 == t.code && a.getApp.core.redirectTo({
									url: "/store/m/account/account"
								});
							}
						});
					},
					complete: function (t) {
						a.getApp.core.hideLoading();
					}
				})) : a.showToast({
					title: "请输入提现金额。"
				});
			}
		}



	}
</script>

<style scoped>
	.header-h {
		position: relative;
		text-align: center;
		height: 324upx;
		padding-top: 48upx;
		color: #fff;
		z-index: 10;
	}

	.header-bg {
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		width: 100%;
	}

	.header-h .cash-btn {
		display: inline-block;
		height: 60upx;
		line-height: 60upx;
		padding: 0 60upx;
		border: 1upx solid #fff;
		border-radius: 999upx;
		font-size: 9pt;
	}

	.menu-group {
		margin: 16upx 0;
	}

	.menu-item {
		background: #fff;
		height: 88upx;
		border-bottom: 1upx solid #eee;
		padding: 0 24upx;
	}

	.menu-item .pointer {
		width: 12upx;
		height: 22upx;
		margin-left: 24upx;
	}

	.menu-item.weijiesuan {
		margin-top: 20upx;
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding-bottom: 56upx;
	}

	.cash-modal {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.cash-modal .modal-bg {
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
	}

	.cash-modal .modal-dialog {
		background: #fff;
		width: 550upx;
		border-radius: 16upx;
		overflow: hidden;
	}

	.cash-modal .cash-input {
		border: 1upx solid #e3e3e3;
		border-radius: 8upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}

	.cash-modal .modal-dialog-footer>view {
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		border-top: 1upx solid #eee;
		border-right: 1upx solid #e3e3e3;
	}

	.cash-modal .modal-dialog-footer>view:last-child {
		border-right: none;
	}

	.cash-modal .modal-dialog-footer>view:hover {
		background: #f3f3f3;
	}
</style>